<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <link rel="stylesheet" th:href="@{/admin/assets/css/bootstrap-clearmin.min.css}" type="text/css">
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .img-box {
            position: relative;
            width: 100%;
            min-height: 200px;
            z-index: 0;
        }

        .img-box span {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -28px;
            color: rgb(163, 163, 163);
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="row cm-fix-height">
    <div class="col-lg-6">
        <div class="panel panel-default" style="margin: 0;">
            <div class="panel-body">
                <form class="form-horizontal" enctype="multipart/form-data" id="add-form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="goods-name">商品名称：</label>
                        <div class="col-sm-10">
                            <input @change="checkStringLength('商品名称', $event)" class="form-control" id="goods-name" maxlength="15" minlength="5"
                                   name="name" placeholder="商品名称长度请在5~15个字符之间" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="goods-price">积分兑换：</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="goods-price" name="price" placeholder="多少积分可兑换该商品" type="number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="goods-stock">库存：</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="goods-stock" name="stock" placeholder="请输入商品总个数" type="number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="goods-limit-exchange" title="每天限制兑换个数">每天限兑：</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="goods-limit-exchange" name="limitExchange" placeholder="请输入每天限制兑换个数" type="number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="goods-limit-exchange">商品简介：</label>
                        <div class="col-sm-10">
                            <textarea @change="checkStringLength('商品简介', $event)" class="form-control" maxlength="150" minlength="1" name="detail"
                                      placeholder="请输入商品简介" rows="3" style="resize: none"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品类型：</label>
                        <div class="col-sm-10">
                            <div class="radio">
                                <label>
                                    <input @change="selectType($event)" checked id="optionsRadios1" name="type" type="radio" value="1">
                                    红包
                                </label>
                                <label>
                                    <input @change="selectType($event)" id="optionsRadios2" name="type" type="radio" value="2">
                                    实物
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="redpacket-money-box">
                        <label class="col-sm-2 control-label">红包金额：</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="moneyInput" max="10000" min="1" name="money" placeholder="请输入红包金额" type="number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商品图片：</label>
                        <div class="col-sm-10">
                            <a @click="selectFile" class="thumbnail img-box" href="javascript:" title="选择图片">
                                <img id="preview-img">
                                <span>选择图片</span>
                            </a>
                            <input @change="previewImg($event)" class="form-control" id="goods-img" name="goodsImg" style="display: none;" type="file">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 text-right">
                            <button @click="beforeSubmitForm($event)" class="btn btn-default" type="button">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/admin/assets/js/lib/jquery.min.js}"></script>
<script th:src="@{/admin/assets/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/script/vue.min.js}"></script>
<script th:src="@{/script/axios.min.js}"></script>
<script type="text/javascript">
    document.title = '亿人宝 - 添加积分商品';

    // 图片预览
    function getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    $(function () {
        let v = new Vue({
            el: '#add-form',
            methods: {
                selectFile: function () {// 点击选择图片
                    $('#goods-img').click();
                },
                previewImg: function ($event) {// 图片预览
                    // console.log(new FormData(document.getElementById('add-form')).get('img'));
                    let filePath = getObjectURL($event.target.files[0]);
                    if (filePath) $('#preview-img').attr('src', filePath);
                },
                checkStringLength: function (str, $event) {
                    let _target = $event.target, minLen = _target.minLength, maxLen = _target.maxLength, elValue = $.trim(_target.value);
                    if (minLen > elValue.length || elValue.length > maxLen) {
                        layer.msg(str + '请在' + minLen + '~' + maxLen + '个字符之间！', function () {
                            return false;
                        });
                    }
                    return true;
                },
                selectType: function ($event) {
                    if ($('#optionsRadios1:checked').length === 0) {
                        $('#moneyInput').val('');
                        $('#redpacket-money-box').stop().slideUp(100);
                    } else {
                        $('#redpacket-money-box').stop().slideDown(100);
                    }
                },
                beforeSubmitForm: function ($event) {
                    let $target = $($event.target);
                    $target.attr('disabled', true);
                    let $form = $target.parents('form');

                    let $nameInput = $form.find('input[name="name"]');
                    let nameValue = $.trim($nameInput.val());
                    if (nameValue.length < 5 || nameValue.length > 15) {
                        layer.msg('商品名称字符长度请在5~15之间！');
                        $target.attr('disabled', false);
                        return;
                    }

                    let $priceInput = $form.find('input[name="price"]');
                    let priceValue = $.trim($priceInput.val());
                    if (priceValue < 1 || priceValue > 100000000) {
                        layer.msg('积分兑换个数请在1~100,000,000之间！');
                        $target.attr('disabled', false);
                        return;
                    }

                    let $stockInput = $form.find('input[name="stock"]');
                    let stockValue = $.trim($stockInput.val());
                    if (stockValue < 1 || stockValue > 100000000) {
                        layer.msg('库存个数请在1~100,000,000之间！');
                        $target.attr('disabled', false);
                        return;
                    }

                    let $limitExchangeInput = $form.find('input[name="limitExchange"]');
                    let limitExchangeValue = $.trim($limitExchangeInput.val());
                    if (limitExchangeValue < 1 || limitExchangeValue > 100000000) {
                        layer.msg('每天限兑个数请在1~100,000,000之间！');
                        $target.attr('disabled', false);
                        return;
                    }

                    let $detailInput = $form.find('textarea[name="detail"]');
                    let detailValue = $.trim($detailInput.val());
                    if (detailValue.length < 1 || detailValue.length > 150) {
                        layer.msg('商品简介字符长度请在5~150之间！');
                        $target.attr('disabled', false);
                        return;
                    }

                    if ($('#optionsRadios1:checked').length === 0) {
                        // 选择实物
                        $('#moneyInput').val('');
                    } else {
                        // 选择红包验证
                        let money = $('#moneyInput').val();
                        if (isNaN(money) || $.trim(money).length === 0) {
                            layer.msg('请输入红包金额！');
                            $target.attr('disabled', false);
                            return;
                        }
                    }

                    if (document.getElementById('goods-img').files.length === 0) {
                        layer.msg('请上传商品图片！');
                        $target.attr('disabled', false);
                        return;
                    }
                    let loadIndex = layer.load();
                    axios.post('[[@{/admin/integral-goods/save}]]', new FormData(document.getElementById('add-form')), {
                        'Content-Type': 'multipart/form-data'
                    }).then((response) => {
                        layer.close(loadIndex);
                        let result = response.data;
                        if (response.status === 200 && result.status === 200) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.v.goodsList.unshift(result.obj);
                            });
                        } else {
                            $target.attr('disabled', false);
                            layer.msg('服务器错误！');
                        }
                    }).catch((error) => {
                        console.log(error);
                    });
                }
            }
        });
    })
</script>
</body>
</html>